<template>
  <div class="_wz_riskControlLedgerDetails">
    <table cellpadding="0" cellspacing="0" border="0">
      <colgroup>
        <col width="11%" />
        <col width="23%" />
        <col width="10%" />
        <col width="23%" />
        <col width="10%" />
        <col width="22%" />
      </colgroup>
      <tbody>
      <tr>
        <td style="font-weight: 600;position:relative;" colspan="6">风险辨识</td>
      </tr>
      <tr>
        <td rowspan="4" style="text-align: center;">辨识图片</td>
        <td colspan="2" rowspan="4">
          <div class="demo-upload-list">
            <Image :src="!!formData.dangerPositionItemSiteImg ? apiUrl.imgUrl + formData.dangerPositionItemSiteImg : 'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!formData.dangerPositionItemSiteImg ? apiUrl.imgUrl + formData.dangerPositionItemSiteImg : 'img/zwtpxd.png']" />
          </div>
        </td>
      </tr>
      <tr>
        <td style="text-align: center;">检查项目</td>
        <td colspan="2">{{!!formData.dangerPositionItemName ? formData.dangerPositionItemName : "--" }}</td>
      </tr>
      <tr>
        <td style="text-align: center;">辨识人员</td>
        <td colspan="2">{{!!formData.dangerPositionItemIdentifyUserName ? formData.dangerPositionItemIdentifyUserName : "--" }}</td>
      </tr>
      <tr>
        <td style="text-align: center;">辨识时间</td>
        <td colspan="2">{{!!formData.dangerPositionItemIdentifyTime ? formData.dangerPositionItemIdentifyTime : "--" }}</td>
      </tr>
      <tr>
        <td style="text-align: center;">检查标准</td>
        <td colspan="6">{{!!formData.dangerPositionItemCriterion ? formData.dangerPositionItemCriterion : "--" }}</td>
      </tr>
      <tr>
        <td style="text-align: center;">风险情况</td>
        <td colspan="6">{{!!formData.dangerPositionItemBasis ? formData.dangerPositionItemBasis : "--" }}</td>
      </tr>
      <tr>
        <td style="text-align: center;">主要后果</td>
        <td colspan="6">{{!!formData.dangerPositionItemNotCriterion ? formData.dangerPositionItemNotCriterion : "--" }}</td>
      </tr>
      </tbody>
    </table>
    <table cellpadding="0" cellspacing="0" border="0" style="border-top: 0px;" v-if="formData.dangerPositionItemAnalyseTime">
      <colgroup>
        <col width="11%" />
        <col width="23%" />
        <col width="10%" />
        <col width="23%" />
        <col width="10%" />
        <col width="22%" />
      </colgroup>
      <tbody>
      <tr>
        <td style="font-weight: 600;position:relative;" colspan="7">风险评价</td>
      </tr>

      <tr>
        <td style="text-align: center;">影响因素</td>
        <td colspan="1">
          <Tag color="primary" type="dot" v-if="formData.dangerPositionItemFactors == 1">人的因素</Tag>
          <Tag color="primary" type="dot" v-if="formData.dangerPositionItemFactors == 2">物的因素</Tag>
          <Tag color="primary" type="dot" v-if="formData.dangerPositionItemFactors == 3">环境因素</Tag>
          <Tag color="primary" type="dot" v-if="formData.dangerPositionItemFactors == 4">管理因素</Tag>
        </td>
        <td style="text-align: center;">评定方法</td>
        <td colspan="1">
          <Tag color="success" type="dot" v-if="formData.dangerPositionItemMethod == 1">LS评价法</Tag>
          <Tag color="success" type="dot" v-if="formData.dangerPositionItemMethod == 2">LEC评价法</Tag>
          <Tag color="success" type="dot" v-if="formData.dangerPositionItemMethod == 3">LC评价法</Tag>
          <Tag color="success" type="dot" v-if="formData.dangerPositionItemMethod == 4">MES评价法</Tag>
          <Tag color="success" type="dot" v-if="formData.dangerPositionItemMethod == 5">直接判断法</Tag>
        </td>
        <td style="text-align: center;">风险等级</td>
        <td colspan="1">
          <Tag color="error" type="dot" v-if="formData.dangerPositionItemLevel == 1">重大风险</Tag>
          <Tag color="warning" type="dot" v-if="formData.dangerPositionItemLevel == 2">较大风险</Tag>
          <Tag color="#eac434" type="dot" v-if="formData.dangerPositionItemLevel == 3">一般风险</Tag>
          <Tag color="primary" type="dot" v-if="formData.dangerPositionItemLevel == 4">低风险</Tag>
        </td>
      </tr>
      <tr>
        <td style="text-align: center;">管控措施</td>
        <td colspan="6">{{!!formData.dangerPositionItemControl ? formData.dangerPositionItemControl : "--" }}</td>
      </tr>
      <tr>
        <td style="text-align: center;">防护措施</td>
        <td colspan="6">{{!!formData.dangerPositionItemProtect ? formData.dangerPositionItemProtect : "--" }}</td>
      </tr>
      <tr>
        <td style="text-align: center;">应急措施</td>
        <td colspan="6">{{!!formData.dangerPositionItemBurst ? formData.dangerPositionItemBurst : "--"}}</td>
      </tr>
      <tr>
        <td style="text-align: center;">评价人员</td>
        <td colspan="2">{{!!formData.dangerPositionItemAnalyseUserName? formData.dangerPositionItemIdentifyUserName: "--"}}</td>
        <td style="text-align: center;">评价时间</td>
        <td colspan="2">{{!!formData.dangerPositionItemAnalyseTime ? formData.dangerPositionItemIdentifyTime : "--"}}</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>
<script>


import {getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

//reactive
export default defineComponent({
  name: 'riskControlLedgerDetails',//组件名称
  components: {},//组件引用
  props:['selectData'],
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用


    const state = reactive({
      formData:{},
    });


    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")
      state.formData = JSON.parse(JSON.stringify(props.selectData))
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      apiUrl,
    }
  }
})


</script>

<style lang="less">
._wz_riskControlLedgerDetails {
  table {
    border-top: 1px solid #515a6e;
    border-left: 1px solid #515a6e;
    width: 100%;

    td {
      min-width: 0;
      height: 40px;
      box-sizing: border-box;
      text-align: left;
      text-overflow: ellipsis;
      border-right: 1px solid #515a6e;
      border-bottom: 1px solid #515a6e;
      padding-left: 18px;
      padding-right: 18px;
    }
  }

  .demo-upload-list {
    margin: 5px auto;
    width: 200px;
    height: 140px;
    text-align: center;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;

    img {
      min-height: 10%;
      max-height: 90%;
      min-width: 10%;
      max-width: 90%;
      //width: 100%;
      //height: 100%;
    }
  }
}
</style>
